<template>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="chartLine" class="line-wrap" style="width: 950px;height: 323px;"></div>
</template>

<script>
    import * as echarts from 'echarts';

    require('echarts/theme/shine');//引入主题

    export default {
    data() {
      return {
        chartLine: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.drawLineChart();
      })
    },
    methods: {
      drawLineChart() {
        this.chartLine = echarts.init(this.$el,'shine');// 基于准备好的dom，初始化echarts实例
        let option = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['雪票','教练','酒店','卡类']
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    axisTick: {
                        show: false
                    },
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisTick: {
                        show: false
                    },
                    name: ''
                }
            ],
            series : [
                  {
      name:'教练',
      type:'line',
      stack: '总量',
      data:[650, 630, 600, 750, 800, 900, 880,770,770,590,620,630]
  },
                {
                    name:'雪票',
                    type:'line',
                    stack: '总量',
                    data:[1300, 1350, 1100, 1400, 1510, 1800, 1700,1200,1450,1390,1120,1250]
                },
              
              
              
              
              
              
                {
                    name:'酒店',
                    type:'line',
                    stack: '总量',
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'卡类',
                    type:'line',
                    stack: '总量',
                    data:[100, 110, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表
        this.chartLine.setOption(option);
      }
    }
  }
</script>

<style scope>
    .line-wrap{
        width:50%;
        height:400px;
    }
</style>